<html>
  <head>
    <meta charset="utf-8">
    <title>哥哥的日程记录表</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body style="color : rgb(20, 63, 237);">
    <div class="welcome">欢迎光临ikun之家</div>
    <span><a href="https://www.bilibili.com/video/BV1J4411v7g6/?spm_id_from=333.788.recommend_more_video.2&vd_source=650a15e6e1428242cedede038db6f98b" target="_blank">→→→→→目睹哥哥风采←←←←←</a></style></span>
    <div class="main">
        <div class="row">
        <input class ="input" type ="text"  id="inputtext" placeholder="请输入想要哥哥做的事情"/>
        <input type ="button" name="bt" value="为哥哥添加" onclick="handleClick(event)"/>
    </div>

    <div id="todoGroup">

    </div>
    <div id="xx"  onmouseenter="enter('xx')" onmouseleave="leave('xx')" >
    </div>  
    
</body>
<script lang="javasctript">

  var intCnt = 0;

    function init(){
        document.getElementById("button2").onclick =handleClick;
    } 

    function keyup(e){
      init(); 
    }
      
    function handleClick(e){
        console.log('handleClick');
        console.log(e);
  
        var temp = getValue();

        var div = document.createElement('div');
        document.getElementById("todoGroup").innerHTML += "<div class = 'item' id = 'todo"
          + intCnt +"'><input type = 'checkbox' name = 'todocheck'><div class='item-value'>"
          + temp + "</div><button class='item-del' type='button' onclick='deleteByIndex("
          + intCnt +")'>删除</button></div>";
        document.getElementById("inputtext").value = "";
        intCnt++;
          
      }

      function getValue(){
        var temp = document.getElementById("inputtext");
        console.log(temp.value);
        return temp.value;
      }

      function deleteByIndex(index){
        document.getElementById("todo" + index).remove();
      }

      function enter(id){
        document.getElementById(id).style='background-color:#3e3e3e'
      }

      function leave(id){
        document.getElementById(id).style='background-color:#FFFFFF'
      }

</script>

  <style>
    body{
      background: url("kun.jpeg")no-repeat center center fixed;
      -webkit-background-size:cover;
      -o-background-size:cover;
      background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 85vh;
    }

    .main{
        padding: 15px;
        width: 800px;
        border: 1px solid #34b96b;
        backdrop-filter: blur(10px);
        border-radius: 8px;
    }

    .row{
        display: flex;
    }
    .item{
      display: flex;
      align-items: center;
      margin: 15px;
      padding: 3px;
      height: 30px;
    }
/* 鼠标覆盖 */
    .item:hover{
      background-color: rgb(164, 219, 253);
      border-radius: 3px;
      height: 30px;
    }

    .item-value{
      flex-grow: 1;
      font-size: 30px;
      color: rgb(207, 30, 30);
    }

    .item-del{
      color: rgb(102, 189, 223);
      background-color: red;
      width: 100px;
      border: 0px;
      border-radius: 8px;
      opacity: 0;
    }

    .item:hover .item-del{
      opacity: 1;
    }
/* 输入框属性 */
    .input{
      padding: 15px;
      width: 800px;
      outline: none;
      margin-top: auto;
      border-radius: 3px;
      border: #000000;
    }

    .input:focus{
      box-shadow: 0px 0px 10px #6f7272;
      border: 2px solid #6f7272;
      border-radius: 3px;
    }
    .welcome   {
      padding: 0px 200px 5px 220px;
      font-weight: bolder;
      font-size: 60px;
    }


  </style>

</html>
